<template>
  <div class="box">
    <van-nav-bar title="支付订单" left-arrow @click-left="onClickLeft"></van-nav-bar>
    <div class="payOrder_box" v-if="orderDetailData !== null">
      <div class="pryOrder_price">
        <p>{{'￥' + orderDetailData.pro_price}}</p>
        <!-- <p>{{orderDetailData.type}}</p> -->
      </div>
      <div class="payOrder_way">
        <p>
          <span>爱美科技 :</span>
          <span>{{'订单号' + order_number}}</span>
        </p>
        <p>选择支付方式</p>
        <div class="way">
          <van-radio-group v-model="radio">
            <div class="way_weixin pay_way">
              <div class="way_pic">
                <img src="@/assets/images/way_weixin.png" alt="">
              </div>
              <div class="way_weixin_text way_text">
                <span>微信支付</span>
                <b>推荐</b>
                <van-radio name="微信支付" class="radio">
                  <template #icon="props">
                    <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
                  </template>
                </van-radio>
              </div>
            </div>
            <div class="way_zhifubao pay_way">
              <div class="way_pic">
                <img src="@/assets/images/way_zhifubao.png" alt="">
              </div>
              <div class="way_zhifubao_text way_text">
                <span>支付宝支付</span>
                <van-radio name="支付宝支付" class="radio">
                  <template #icon="props">
                    <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
                  </template>
                </van-radio>
              </div>
            </div>
          </van-radio-group>
        </div>
      </div>
      <p class="payOrder_hint">为避免订单失败，建议您在3分钟内完成支付</p>
      <button class="payOrder_btn" @click="payOrder">支付订单</button>
    </div>
  </div>
</template>

<script>
import { getOrderDetail, payOrder } from '../../api'
import Vue from 'vue'
import { NavBar, Radio, RadioGroup, Dialog } from 'vant'
Vue.use(NavBar)
Vue.use(Radio)
Vue.use(RadioGroup)
Vue.use(Dialog)
export default {
  data () {
    return {
      radio: '微信支付',
      activeIcon: require('@/assets/images/way_select.png'),
      inactiveIcon: require('@/assets/images/way_noselect.png'),
      orderDetailData: [],
      order_number: '329823454',
      order_id: ''
    }
  },
  computed: {},
  mounted () {
    this.order_id = this.$route.query.order_id
    getOrderDetail({
      username: localStorage.getItem('userTel_AM'),
      order_id: this.order_id
    }).then(res => {
      if (res.data.code === '200') {
        this.orderDetailData = res.data.data[0]
      }
    })
  },
  methods: {
    payOrder () {
      payOrder({
        order_id: this.order_id
      }).then(res => {
        if (res.data.code === '200') {
          this.$router.replace({ path: '/paySucceed', query: { sum: this.orderDetailData.pro_price } })
        }
      })
    },
    onClickLeft () {
      Dialog.confirm({
        message: '机会不等人，请三思而后行'
      })
        .then(() => {
          this.$router.go(-1)
        })
        .catch(() => {
          // on cancel
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.payOrder_box {
  width: 100%;
  height: auto;
  .pryOrder_price {
    width: 100%;
    height: 1.25rem;
    box-shadow: 0 0.04rem 0.05rem 0 rgba(97,97,97,0.2);
    border-radius: 0.06rem;
    overflow: hidden;
    p:nth-of-type(1) {
      font-size: 0.3rem;
      color: #ff5e5e;
      text-align: center;
      margin-top: 0.36rem;
      margin-bottom: 0.1rem;
      line-height: 0.3rem;
    }
    p:nth-of-type(2) {
      text-align: center;
      color: #5f5f5f;
      font-size: 0.14rem;
      line-height: 0.14rem;
    }
  }
  .payOrder_way {
    width: 100%;
    height: 1.68rem;
    margin-top: 0.15rem;
    box-shadow: 0 0.04rem 0.05rem 0 rgba(97,97,97,0.2);
    padding: 0.1rem 0 0 0.2rem;
    p:nth-of-type(1) {
      width: 100%;
      height: 0.14rem;
      line-height: 0.14rem;
      font-size: 0.12rem;
      color: #5d5d5d;
      margin-bottom: 0.18rem;
      span:nth-of-type(1) {
        float: left;
        width: 0.63rem;
      }
      span:nth-of-type(2) {
        float: left;
      }
    }
    p:nth-of-type(2) {
      width: 100%;
      height: 0.14rem;
      line-height: 0.14rem;
      color: #686868;
      font-size: 0.12rem;
      margin-bottom: 0.04rem;
    }
    .way {
      width: 100%;
      height: 1.08rem;
      .pay_way {
        .way_pic {
          width: 0.38rem;
          height: 0.54rem;
          float: left;
          text-align: left;
          padding: 0.12rem 0;
          img {
            width: 0.3rem;
            height: 0.3rem;
          }
        }
        .way_text {
          width: 3.17rem;
          height: 0.54rem;
          float: left;
          padding: 0 0.2rem 0 0.05rem;
          span {
            font-size: 0.14rem;
            line-height: 0.54rem;
            color: #505050;
            text-align: left;
            float: left;
          }
          b {
            font-weight: normal;
            padding: 0 0.03rem;
            border: 1px solid #ff7676;
            border-radius: 0.02rem;
            text-align: center;
            float: left;
            font-size: 0.12rem;
            color: #ff7676;
            line-height: 0.14rem;
            margin: 0.2rem 0.05rem;
          }
          .radio {
            float: right;
          }
        }
      }
      .way_weixin {
        width: 100%;
        height: 0.54rem;
        .way_weixin_text {
          border-bottom: 1px solid #f1f1f1;
        }
      }
      .way_zhifubao {
        width: 100%;
        height: 0.54rem;
      }
    }
  }
  .payOrder_hint {
    line-height: 0.14rem;
    font-size: 0.12rem;
    margin-top: 0.3rem;
    color: #d1d1d1;
    padding-left: 0.2rem;
  }
  .payOrder_btn {
    position: fixed;
    bottom: 0.25rem;
    margin: 0 0.34rem;
    width: 3.06rem;
    height: 0.4rem;
    background: linear-gradient(0deg,rgba(234,180,254,1),rgba(253,139,217,1));
    box-shadow: 0 0.03rem 0.03rem 0 rgba(234,180,254,0.4);
    border-radius: 0.2rem;
    border: none;
    text-align: center;
    color: #FFFFFF;
    font-size: 0.16rem;
    line-height: 0.4rem;
  }
}
.img-icon {
  width: 0.2rem;
  height: 0.2rem;
}
/deep/ .van-icon-arrow-left {
  font-size: 0.22rem;
  color: #171717;
}
/deep/ .van-nav-bar__title {
  font-size: 0.18rem;
  color: #171717;
  font-weight: bold;
}
/deep/ .van-nav-bar {
  z-index: 1000;
}
/deep/ .van-radio {
  height: 0.54rem;
}
</style>
